<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Solicitud de Compra</title>
  <link href="./css/styles.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="js/json2.js"></script>
  <script type="text/javascript">
				
		function initPopUp() {
			$("#altaItemPopUp").hide();
			$("#btnAddRodamiento").click(function (){
				buscarRodamiento();
			});
			$("#cancelarItem").click(function (){
				cerrarPopUp();
			});
			$("#agregarItem").click(function (){
				agregarItemALaSolicitud();
			});
			$("#cantidad").keyup(function () {
				  this.value = this.value.replace(/[^0-9]/g,''); 
			});
		}

		function cerrarPopUp() {
			resetPopUpsValues();
			$("#results").text( "" );
			$("#resultPopup").text( "" );	
			$("#txtCodRodamiento").val("");
			$("#altaItemPopUp").fadeOut("slow");
		}

		function agregarItemALaSolicitud() {
			var myCant = $("#cantidad").val()
			if (myCant < 1 || !(myCant>0)){
				$("#resultPopup").text( "      [ Cantidad inválida ]" );	
							
			}else{
				$("#txtCodRodamiento").val("");
				$("#results").text( "[ Agregado ]" );
				var codigo = $("#pCodigo").text();
				var desc = $("#pDescripcion").text();
				var carac = $("#pCaracteristica").text();
				var marca = $("#pMarca").text();
				var origen = $("#pOrigen").text();
				var precio = $("#pUltimoPrecio").text();
				var vigencia = $("#pVigencia").text();
				var cantidad = $("#cantidad").val();
				
				var nuevoItem = {
		  			"codigo" : codigo,
		  			"descripcion" : desc,
		  			"caracteristica" : carac,
		  			"marca" : marca,
		  			"origen" : origen,
		  			"precio" : precio,
		  			"vigencia" : vigencia,	
					"cantidad" : cantidad
				};
				itemsSolicitud.push(nuevoItem);
				redibujarItems();
				cerrarPopUp();
			}
		}

		jQuery('#cantidad').keyup(function () {
			  this.value = this.value.replace(/[^0-9]/g,''); 
		});

		function redibujarItems() {
			$("#itemsSolicitud").html("");
			var cantidadDeItems = itemsSolicitud.length;
			
			for(var i=0 ; i < cantidadDeItems ; i++) {
				var row = document.createElement("tr");
				var itemActual = itemsSolicitud[i];

				var tdCodigo = document.createElement("td");
				tdCodigo.innerHTML = itemActual.codigo;
				row.appendChild(tdCodigo);
				
				var tdDesc = document.createElement("td");
				tdDesc.innerHTML = itemActual.descripcion;
				row.appendChild(tdDesc);

				var tdCarac = document.createElement("td");
				tdCarac.innerHTML = itemActual.caracteristica;
				row.appendChild(tdCarac);

				var tdMarca = document.createElement("td");
				tdMarca.innerHTML = itemActual.marca;
				row.appendChild(tdMarca);
             	
				var tdOrigen = document.createElement("td");
				tdOrigen.innerHTML = itemActual.origen;
				row.appendChild(tdOrigen);

				var tdPrecio = document.createElement("td");
				tdPrecio.innerHTML = itemActual.precio;
				row.appendChild(tdPrecio);

				var tdVigencia = document.createElement("td");
				tdVigencia.innerHTML = itemActual.vigencia;
				row.appendChild(tdVigencia);
				
				var tdCantidad = document.createElement("td");
				tdCantidad.innerHTML = itemActual.cantidad;
				row.appendChild(tdCantidad);
				
				var tdElim = document.createElement("td");
				tdElim.innerHTML = "<a href='javascript:eliminarItem("+i+")'>Eliminar</a>";
				row.appendChild(tdElim);
				$("#itemsSolicitud").append(row);
			}
		}

		function eliminarItem(index) {
			itemsSolicitud.splice(index, 1);
			redibujarItems();
		}

		function resetPopUpsValues() {
  			$("#pCodigo").text("");
  			$("#pDescripcion").text("");
  	  		$("#pCaracteristica").text("");
  	  		$("#pMarca").text("");
  			$("#pOrigen").text("");
			$("#cantidad").val("");
			$("#pUltimoPrecio").text("");
			$("#pVigencia").text("");
		}

		function mostrarPopUp() {
			var w = $(this).width(); 
			var h = $(this).height(); 
			//Ubica el PopUp  
			w = (w/2) - 150;
			h = (h/2) - 178;
			$("#altaItemPopUp").css("left",w + "px"); 
			$("#altaItemPopUp").css("top",h + "px");
			$("#altaItemPopUp").fadeIn("fast");
		}

		var itemsSolicitud = new Array();

		$(document).ready(function(){
			initPopUp();
			document.getElementById("submitAction").disabled = false;
		});
		
		function buscarRodamiento(){
			$(".error").remove();
  			if ( $("#txtCodRodamiento").val() == "" ){
  				$("#txtCodRodamiento").focus().after("<span class='error'>Ingrese un código</span>");
            	return false;
  	  		}else{
  	  			//Llamado al servlet para que busque el detalle.
  	  			$("#results").html("<img src='./css/images/loading.gif' /> [ Obteniendo datos rodamiento... ]");
  	  			var jsonData = {
  					"codigo" : $("#txtCodRodamiento").val()
  				};
  	  			$.ajax({
  	        		type: "GET",
  	        		url: "/taller14_web/BuscarRodamiento",
  	        		contentType: "application/json; charset=ISO-8859-1",
  		   			dataType: "html",
  		   			data: { data : jsonData },
  	        		success: function( resp ){
  	        			var json = JSON.parse(resp);
  	        			if (json.codigo == ""){
  	        				$("#results").text( "[ No se encontró el rodamiento. Ingrese un nuevo código. ]" );
  	        				$("#txtCodRodamiento").val("");
  	  	        		}else{
  	        		 		//initPopUp();
  	        		 		$("#results").text( "[ Encontrado ]" );
  	        		 		$("#pCodigo").text(json.codigo);
  	        				$("#pDescripcion").text(json.descripcion);
  	        				$("#pCaracteristica").text(json.caracteristica);
  	        				$("#pMarca").text(json.marca);
  	    					$("#pOrigen").text(json.origen);
  	    					$("#pUltimoPrecio").text(json.ultimaCotizacion != "" ? json.ultimaCotizacion : "-");
  	    					$("#pVigencia").text(json.vigenciaHasta != "" ? json.vigenciaHasta : "-");
  	        				mostrarPopUp();
  	  	        		}
  	        	  	},
  	        	  	error: function( req, status, err ) {
  	        	  		$("#results").text( "[ Error ]" );
  	        	  	}
  				});
	  	  	  }	
		}		
		
		function submitForm() {
			var allItems = {"items" : itemsSolicitud};
			allItemsJSON = JSON.stringify(allItems);
			var hidItems = document.getElementById("itemsDeLaSolicitud");
			hidItems.value = allItemsJSON;
			
			document.getElementById("submitAction").disabled = true;
			$("#results").html("<img src='./css/images/loading.gif' /> [ Enviando solicitud... ]");
			
			//document.form.submit();
			document.forms["AltaSolicitud"].submit();
		} 			
  </script>
</head>


<body>
<div id="wrapper">
	
	<div id="header">
	  <div class="col-full">
	    <h1>Sistema Taller 14</h1>
	  </div> 
	</div> 
  
  	<div id="content-wrap">
  
	    <jsp:include page="/menuBar.jsp"></jsp:include>
    	<div class="featured col-full feat-blog">
    	<jsp:include page="mensajes.jsp"></jsp:include>
			<div class="feat-post">   
				<div class="feat-content">
					<div class="entry">
          
			            <h3>Agregar rodamientos a la solicitud de compra</h3>
			            
			            <p id="results">
						</p>
            			
			            <form id="AltaSolicitud" name="AltaSolicitud" action="./SolicitudCompra" method="post">
			      
			              <div class="form-item">
			             
				              <label>C&oacute;digo del rodamiento:</label>
				              <input id="txtCodRodamiento" name="txtCodRodamiento" style="margin-right: 10px;"/>
				              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				              <input type="button" id="btnAddRodamiento" value="Agregar">
				              
				              <table class="wwFormTable">
				              <tr>
				              	<td colspan="3">				  
				              		<table border="1" cellspacing="1" width="100%">
				              			<thead>
				              				<tr>
					                			<td>Código</td>
					                			<td>Descripción</td>
					                			<td>Característica</td>
					                			<td>Marca</td>
					                			<td>Origen</td>
					                			<td>Ultimo Precio</td>
					                			<td>Vigencia</td>
					                			<td>Cantidad</td>
					                			<td>Acción</td>
				                			</tr>
				               			</thead>
				                		<tbody id="itemsSolicitud">
										</tbody>
				             	 	</table>
				             	</td>
              	  				<tr>
				  					<td colspan="3"><div align="right"><input type="submit" id="submitAction" name="AltaSolicitud" value="Enviar Solicitud" onclick="submitForm();"/>
				  					</div></td>
				  				</tr>
				  			</table>
	        			 	</div>
	        			 	<input type="hidden" name="itemsDeLaSolicitud" id="itemsDeLaSolicitud" value="">
        				</form>
       		 		</div>
       			</div>
       		</div>
		</div>
	</div>
		
	<div id="altaItemPopUp" style="display: none;">
		<table class="wwFormTable">
			<tr>
				<td><strong>&nbsp;&nbsp;&nbsp;&nbsp;C&oacute;digo: </strong></td>
				<td align="center"><p id="pCodigo"></p></td>
			</tr>
			<tr>
				<td><strong>&nbsp;&nbsp;&nbsp;&nbsp;Descripción: </strong></td>
				<td align="center"><p id="pDescripcion"></p></td>
			</tr>
			<tr>
				<td><strong>&nbsp;&nbsp;&nbsp;&nbsp;Caracter&iacute;stica: </strong></td>
				<td align="center"><p id="pCaracteristica"></p></td>
			</tr>
			<tr>
				<td><strong>&nbsp;&nbsp;&nbsp;&nbsp;Marca: </strong></td>
				<td align="center"><p id="pMarca"></p></td>
			</tr>
			<tr>
				<td><strong>&nbsp;&nbsp;&nbsp;&nbsp;Origen: </strong></td>
				<td align="center"><p id="pOrigen"></p></td>
			</tr>
			<tr>
				<td><strong>&nbsp;&nbsp;&nbsp;&nbsp;&Uacute;ltimo precio: </strong></td>
				<td align="center"><p id="pUltimoPrecio"></p></td>
			</tr>
			<tr>
				<td><strong>&nbsp;&nbsp;&nbsp;&nbsp;Vigencia hasta: </strong></td>
				<td align="center"><p id="pVigencia"></p></td>
			</tr>
			<tr>
				<td><strong>&nbsp;&nbsp;&nbsp;&nbsp;Cantidad: </strong></td>
				<td align="center"><input type="text" id="cantidad" maxlength="6" size="6"></td>
			</tr>
			<tr>
				<td colspan="2" align="center"><p id="resultPopup"></p>
			</tr>
			<tr>
				<td valign="middle" align="center"><input type="button" id="agregarItem" value="Confirmar"></td>
				<td valign="middle" align="center"><input type="button" id="cancelarItem" value="Cancelar"></td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>